<template>
    <div class="app-container">
        <!-- TODO 入驻商管理页面 查询和其他操作 -->
        <div class="filter-container">
            <el-input v-model="listQuery.storeId" clearable class="filter-item" style="width: 160px;" placeholder="请输入商铺id" />
            <el-input v-model="listQuery.storeName" clearable class="filter-item" style="width: 160px;" placeholder="请输入商铺名称" />
            <el-input v-model="listQuery.storePhone" clearable class="filter-item" style="width: 160px;" placeholder="请输入商家手机号" />
            <el-input v-model="listQuery.storeThemain" clearable class="filter-item" style="width: 160px;" placeholder="请输入主营业务" />
            <el-input v-model="listQuery.addAdminName" clearable class="filter-item" style="width: 160px;" placeholder="请输入主营业务" />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
            <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
        </div><!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
            <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" class="table-expand">
                    <el-form-item label="店铺地址">
                      <span>{{ props.row.address }}</span>
                    </el-form-item>
                    <el-form-item label="主营业务">
                      <span>{{ props.row.themain }}</span>
                    </el-form-item>
                    <el-form-item label="营业执照码">
                      <span>{{ props.row.license }}</span>
                    </el-form-item>
                    <el-form-item label="营业执照">
                      <img :key="props.row.licenseImgUrl" :src="props.row.licenseImgUrl" class="gallery">
                    </el-form-item>
                    <el-form-item label="订单总数">
                      <span>{{ props.row.orderTotal }}</span>
                    </el-form-item>
                    <el-form-item label="销售总额">
                      <span>{{ props.row.salesTotal }}</span>
                    </el-form-item>
                  </el-form>
          </template>
        </el-table-column>

      <el-table-column align="center" label="店铺id" prop="id" />
      <el-table-column align="center"  label="店铺名称" prop="name" />
      <el-table-column align="center" label="商家手机号" prop="phone" />
      <el-table-column align="center" label="商家微信号" prop="wx" />
      <el-table-column align="center" label="银行账号" prop="bankAccount" />
      <el-table-column align="center" label="开户行" prop="bankName" />
      <el-table-column align="center" label="邮费" prop="freightValue" />
      <el-table-column align="center" label="包邮最低消费" prop="freightMin" />
      <el-table-column align="center" label="商品分享" prop="wxShare">
        <template slot-scope="scope">
            <el-tag :type="scope.row.wxShare ? 'success' : 'error' ">
                {{ scope.row.wxShare ? '支持' : '不支持' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="创建人" prop="addAdminName" />
      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
<template slot-scope="scope">
    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">
        编辑</el-button>
    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
    </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

        <el-tooltip placement="top" content="返回顶部">
          <back-to-top :visibility-height="100" />
        </el-tooltip>

      </div>
</template>

  <style>
    .table-expand {
        font-size: 0;
    }

    .table-expand label {
        width: 100px;
        color: #99a9bf;
    }

    .table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
    }

    .gallery {
        width: 80px;
        margin-right: 10px;
    }

    .goods-detail-box img {
        width: 100%;
    }
  </style>

<script>
import { listStore, deleteStore } from '@/api/store'
import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
    name: 'GoodsList',
    components: { BackToTop, Pagination },
    data() {
        return {
            list: [],
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 20,
                goodsSn: undefined,
                name: undefined,
                sort: 'add_time',
                order: 'desc'
            },
            goodsDetail: '',
            detailDialogVisible: false,
            downloadLoading: false
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true
            listStore(this.listQuery).then(response => {
                this.list = response.data.data.list
                this.total = response.data.data.total
                this.listLoading = false
            }).catch(() => {
                this.list = []
                this.total = 0
                this.listLoading = false
            })
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        handleCreate() {
            this.$router.push({ path: '/store/create' })
        },
        handleUpdate(row) {
            console.log(row)
            this.$router.push({ path: '/store/edit', query: { store: row }})
        },
        showDetail(detail) {
            this.goodsDetail = detail
            this.detailDialogVisible = true
        },
        handleDelete(row) {
            deleteStore(row).then(response => {
                this.$notify.success({
                    title: '成功',
                    message: '删除成功'
                })
                this.getList()
            }).catch(response => {
                this.$notify.error({
                    title: '失败',
                    message: response.data.errmsg
                })
            })
        }
    }
}
</script>
